<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	<link rel="stylesheet" href="../../admin/css/other/person.css" />
	
	<style>
		#day{
			height: 100px;background-color: paleturquoise;margin-top: 15px;
			font-size: 26px;
			line-height: 100px;
			text-indent: 2em;
		}
		#log{
			height: 300px;background-color: ;margin-top: 15px
		}
		#service{
			height: 100px;background-color: honeydew;margin-top: 15px;
		}
		#btn{
			text-align: center;
			line-height: 100px;
		}
		#liuyan{
			height: 120px;background-color: honeydew;margin-top: 15px;
			background-color: paleturquoise;
		}
		#form_liuyan{
						text-indent: 2em;
		}
		ul{
			margin-left: 2em;
		}
	</style>
</head>
<body class="pear-container">
	<div class="layui-row layui-col-space10">
		<div class="layui-col-md3">
			<div class="layui-card">
				<div class="layui-card-body" style="padding: 25px;">
					<div class="text-center layui-text">
						<div class="user-info-head" id="userInfoHead">
							<img src="../../admin/images/avatar.jpg" id="userAvatar" width="115px" height="115px" alt="">
						</div>
						<h2 style="padding-top: 20px;font-size: 20px;">Coder</h2>

					</div>
				</div>
				<div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
					<span>点击修改个人信息</span>
				</div>
			</div>

			<div class="layui-card">
				<div class="layui-card-header">
					服务记录
				</div>
				<div class="layui-card-body">
					<ul class="list">
						<li class="list-item"><span class="title">服务申请</span><span class="footer">2020-06-04 11:28</span></li>
					</ul>
				</div>
			</div>
			<div class="layui-card">
				<div class="layui-card-header">
					账号关联
				</div>
				<div class="layui-card-body">
					<ul class="list">
						<li class="list-item"><span class="title"><i class="layui-icon" style="color: #1E9FFF;">&#xe676;</i> QQ</span><span class="footer" style="color: cornflowerblue;">已关联</span></li>
						<li class="list-item"><span class="title"><i class="layui-icon" style="color: #3CB371">&#xe677;</i>微信</span><span class="footer" style="color: cornflowerblue;">已关联</span></li>
						<li class="list-item"><span class="title"><i class="layui-icon" style="color: 	#FF4500">&#xe618;</i>Facebook</span><span class="footer" style="color: cornflowerblue;">已关联</span></li>
						<li class="list-item"><span class="title"><i class="layui-icon" style="color: #1E9FFF;">&#xe7ae;</i>Google</span><span class="footer" style="color: cornflowerblue;">已关联</span></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="layui-col-md9">
			<div class="layui-card">
				<div class="layui-card-header">
					主页
				</div>
				<div class="layui-card-body">
					<div id="day">
						您已经来到云沐里&nbsp;<span>25</span>&nbsp;天。
					</div>

					<div id="log">
						<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利72周年
        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>
					</div>
					<div id="liuyan">
					<p>留言板</p>
					
					<form id="form_liuyan" action="" method="post">
					<textarea style="margin: 0px; width: 959px; height: 103px;"></textarea>
						<button class="layui-btn">发表</button>
					</form>

					</div>
					
					<div id="service">
						<div id="btn">
							<button  type="button" class="layui-btn layui-btn-lg" id="service_btn" >服务申请</button>
						</div>
					</div>
					

					
				</div>

			</div>
		</div>
	</div>

	<div class="layui-inline">
		<input type="text" class="layui-input" id="test" />
	</div>
	<script src="../../component/layui/layui.js"></script>

	<script>
	</script>

	<script>
		layui.use(['jquery', 'element', 'layer','form','laydate'], function () {
			var element = layui.element,
				layer = layui.layer,
				$ = layui.jquery,
				form = layui.form,
				laydate = layui.laydate;
			// laydate.render({
			// 	elem: '#test'
			// 	//,type: 'date' //默认，可不填
			// });
			$('#service_btn').click(function () {
				layer.open({
					type:1,
					content:'gg'
				})
			})

			let MODULE_PATH = "operate/";
			$("#userAvatar").attr("src", parent.layui.$(".layui-nav-img").attr("src"));

			window.callback = function (data) {
				layer.close(data.index);
                $("#userAvatar").attr("src", data.newAvatar);
                parent.layui.$(".layui-nav-img").attr("src", data.newAvatar);
            }



			$("#userAvatar").click(function () {
				layer.open({
					type: 2,
					title: '更换头像',
					shade: 0.1,
					area: ["900px", "500px"],
					content: MODULE_PATH + 'uploadProfile.html',
					btn: ['确定', '取消'],
					yes: function (index, layero) {
						window['layui-layer-iframe' + index].submitForm();
					}
				});
			});
		});
	</script>
</body>
</html>
